<template>

  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-button style="float: left; padding: 3px 0" type="text" @click="reset">重置</el-button>
      <span>购物包裹</span>
      <el-button v-if="cartList.length!=0" style="float: right; padding: 3px 0" type="text" @click="toPay">去结算</el-button>
    </div>
    <div v-for="item in cartList" v-if="item.count>0" class="text item">
      <span style="float: left;" v-text="item.title"></span>
      <!--计数器:份数-->
      <el-input-number @change="handleChange" size="mini" :min="0" v-model="item.count"></el-input-number>
      <!--价格:单价乘数量-->
      <span style="float: right;" v-text="item.price*item.count+'元'"></span>

    </div>
    <el-divider></el-divider>
    <div class="clearfix">
      <span>总价格</span>
      <span>{{ totalPrice }}元</span>
    </div>
  </el-card>

</template>

<script>
export default {
  name: "Cart",
  props: {
    cartList: Array
  },
  data() {
    return {}
  },
  computed: {
    //  返回购物清单总价格
    totalPrice() {
      let total = 0;
      if (this.cartList != null) {
        for (let i = 0; i < this.cartList.length; i++) {

          total = total + this.cartList[i].count * this.cartList[i].price;
        }
      }
      return total;
    }
  },
  methods: {
    toPay: function () {
      this.$emit("to-pay", this.cartList);
    },
    reset: function () {
      this.$emit("reset-cart");
      this.cartList.splice(0);
    },
    handleChange(value) {
     if (value==0){
       this.cartList.splice(0);
     }
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 300px;
}</style>
